<template>
    <view>
        <!-- 已购买 -->
        <view class="currentBoxs" v-if="Buy">
            <view class="flex-1 d-flex a-center">
                <image :src="$imgUrls(pageData.img)" mode="aspectFill" class="CurrentLogo"></image>
                <text class="flex-1 ellipsis black size32 m-left20 m-right24">{{ pageData.name }}</text>
            </view>
            <view class="d-flex f-column a-center">
                <text class="black size30">{{ pageData.use_time }} / {{ pageData.times }}</text>
                <view class="lineBox">
                    <u-line-progress :percentage="schedule" :showText="false" :height="3" activeColor="#ff0000"></u-line-progress>
                </view>
            </view>
        </view>
        <!-- 未购买 -->
        <view class="unpurchased" v-else>
            <view class="list">
                <view class="ImgbOx">
                    <image :src="$imgUrls(pageData.img)" mode="aspectFill" class="wh bor_radius_10"></image>
                </view>
                <view class="content">
                    <text class="black ellipsis size32">{{ pageData.name }}</text>
                    <text class="color_99 ellipsis size26" v-if="pageData.info">{{ pageData.info }}</text>
                    <text class="color_99 size28">{{ pageData.times }}次</text>
                    <view class="row j-sb a-center">
                        <text class="color size32">{{ pageData.price }}</text>
                        <!-- <view class="lookbtn color">查看详情</view> -->
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['pageData', 'Buy'],
        data() {
            return {
                headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG'
            };
        },
        computed: {
            schedule(item) {
                if (!this.pageData) return;
                console.log(this.pageData, 'this.pageData');
                const Use = Number(this.pageData.times) - Number(this.pageData.use_time);
                const result = Math.round((Use / Number(this.pageData.times)) * 100);
                console.log(result, 'result');
                return result;
            }
        },
        methods: {}
    };
</script>

<style lang="scss" scoped>
    .currentBoxs {
        width: 100%;
        display: flex;
        align-items: center;
        margin: 20rpx auto 10rpx;
    }

    .CurrentLogo {
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
    }

    .lineBox {
        width: 70rpx;
        margin-top: 10rpx;
    }

    .unpurchased {
        width: 100%;
        margin-top: 30rpx;

        .list {
            width: 100%;
            display: flex;

            .ImgbOx {
                width: 180rpx;
                height: 180rpx;
                border: 1rpx solid #f2f2f2;
                border-radius: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 24rpx;
            }

            .content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .lookbtn {
                    padding: 6rpx 24rpx;
                    border: 1rpx solid #f2f2f2;
                    border-radius: 30rpx;
                    font-size: 24rpx;
                }
            }
        }
    }
</style>
